﻿@bullet-color: #2d9639;
@light-text-color: #fff;
@hidden-text-color: #aaa;
@corner: 5px;
@error-color: #700;
@error-hover-color: #C00;
@bullet-number-color: @light-text-color;
@dark-background-color: #3c454f;
@dark-background-hover-color: #8a8f95;
@gradient-top: #a4edac;
@gradient-bottom: #86e08f;
@hover-gradient-top: #e2f3e4;
@hover-gradient-bottom: #d6f2d9;

@import "Mixins.less";

/******	Custom JSTree Node Icons ******/
.jstree-default .jstree-node.jstree-closed > i.jstree-icon {
	background-image: url('') /*Images/closedBook.svg*/;
	background-position: 0;
	vertical-align: text-top;
	height: 20px;
	width: 20px;
}

.jstree-default .jstree-node.jstree-open > i.jstree-icon {
	background-image: url('') /*Images/openBook.svg*/;
	background-position: 0;
	vertical-align: text-top;
	height: 20px;
	width: 20px;
}

.jstree-default .jstree-node.jstree-leaf > i.jstree-icon {
	background-image: url('') /*Images/document.svg*/;
	background-position: 0;
	vertical-align: text-top;
	height: 20px;
	width: 20px;
}

li.jstree-node.tocHidden a{
	color: @hidden-text-color;
}

/****** Top CSS Marker Class ******/
// All elements beneath acquire library's font
.dmh- {
	font-size: 14px;
	line-height: 1.4285;
	font-family: "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "Helvetica Neue", Helvetica, Arial;
}


/****** Documentation Page Styles ******/
html.dmh- {
	height: 100%;
}

.dmh- body {
	margin: 0;
	height: 100%;
}

#dmhDocTitle {
	position: absolute;
	right: 0;
	left: 0;
	font-size: 18px;
	color: @light-text-color;
	padding: 15px 0 15px 75px;
	background-color: @dark-background-color;
}

#dmhDocToolBar {
	float: left;
	width: 170px;
	padding: 15px;
	position: absolute;
	top: 0;
	bottom: 0;
	border: 5px solid @bullet-color;
	display: none;
}

#dmhDocToolBar h3 {
	text-align: center;
	margin: 0;
}

#dmhDocToolBarBreak {
	margin: 15px 0 15px 0;
	border-top: 1px dashed @dark-background-color;
}

#dmhStatusBar {
	height: 30px;
}

#dmhStatusMessage {
	.border-radiuses(@corner, @corner, @corner, @corner);
	background: @bullet-color;
	color: @light-text-color;
	text-align: center;
}

#dmhFirstTimeTools, #dmhDocumentationTools,
#dmhViewModelButtonBar, #dmhEditModeButtonBar {
	display: none;
}

#dmhDocContentPanel {
	position: absolute;
	top: 54px;
	right: 0;
	bottom: 0;
	left: 0;
}

#dmhTocContainer {
	border-right: 1px solid @dark-background-color;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 299px;
	overflow: auto;
}

#dmhToc .jstree-wholerow-clicked {
	.gradient(@gradient-top, @gradient-bottom);
}

#dmhToc .jstree-wholerow-hovered {
	.gradient(@hover-gradient-top, @hover-gradient-bottom);
}

#dmhPageContainer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 300px;
	overflow: auto;
}

#dmhDocumentationView, #dmhDocumentationEditor {
	display: none;
	padding: 20px;
}

#dmhDocumentationEditorContent {
	height: 300px;
}


/****** First Time Editor ******/
#dmhFirstTimeEdit .dmhDialogTitle {
	cursor: move;
}

#dmhCreateHelpButton {
	position: fixed;
	right: 25px;
	bottom: 50px;
}

#dmhBulletButtons {
	margin-top: 0;
	text-align: left;
}

#dmhBulletEditTemplate {
	display: none;
}

.dmhBulletEdit {
	margin-bottom: 5px;
}

.dmhBulletEditTextContainer {
	margin: 0 65px 0 30px;
}

#dmhFirstTimeEditBullets .dmhButtonCancel {
	float: right;
	position: relative;
	top: 3px;
}


/****** Modal Mask ******/
#dmhModalMask {
	.opacity(.25);
	background: #000;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3000;
	display: none;
}


/****** Dialogs ******/
.dmhDialog {
	.drop-shadow(0; 0; 10px; 0; .5);
	.border-radius(@corner);
	background: #eee;
	position: absolute;
	z-index: 5000;
	display: none;
	min-width: 400px;
	max-width: 600px;
}

.dmhDialogContent {
	padding: 15px;
}

.dmhDialogTitle {
	.border-radiuses(@corner, 0, 0, @corner);
	width: 100%;
	padding: 5px 0;
	background-color: @dark-background-color;
	color: @light-text-color;
	text-align: center;
	font-size: larger;
	font-weight: bold;
}


/****** Form Input ******/
.dmhFormRow {
	margin-bottom: 5px;
	// width: 100%;
}

.dmhFormRow label {
	display: block;
	margin-bottom: 0;
	font-weight: bold;
}

.dmhFormRow input, .dmhFormRow select, .dmhFormRow textarea {
	max-width: none;
	width: 100%;
}

.dmhFormRow input[type='checkbox']
{
	width: auto;
}

.dmhFormRow textarea {
	height: 70px;
}

.dmhFieldHelp {
	font-size: x-small;
}


/****** Button Styles ******/
.dmhButtonBar {
	clear: both;
	margin-top: 15px;
	text-align: center;
}

.dmhButton {
	.border-radius(@corner);
	border: 0;
	padding: 2px 10px;
	color: @light-text-color;
	background-color: @dark-background-color;
	display: inline-block;
}

.dmhButton + .dmhButton {
	margin-left: 25px;
}

.dmhButton:hover {
	cursor: pointer;
	background-color: @dark-background-hover-color;
}

.dmhButtonSmall {
	font-size: x-small;
}

.dmhButtonCancel {
	background-color: @error-color;
}

.dmhButtonCancel:hover {
	background-color: @error-hover-color;
}


/****** Bullet Styles ******/
#dmhFirstTimeViewBullets {
	margin-top: 15px;
}

#dmhBulletViewTemplate {
	display: none;
}

.dmhBulletView {
	clear: both;
	margin-bottom: 5px;
}

.dmhBullet {
	float: left;
	width: 20px;
	height: 20px;
	position: relative;
	top: 2px;
	font-size: x-small;
}

.dmhBulletImage {
	fill: @bullet-color;
}


.dmhBulletNumber {
	position: relative;
	top: -21px;
	width: 20px;
	text-align: center;
	color: @bullet-number-color;
}

.dmhBulletViewTextContainer {
	margin-left: 30px;
}

.dmhBulletViewText {
	width: 100%;
}

.dmhPlacedBullet {
	position: absolute;
	z-index: 5001;
	height: 30px;
	width: 30px;
	background-color: @bullet-color;
	.border-radius(15px);
	.drop-shadow(0; 0; 10px; 0; .5);
}

.dmhPlacedBulletImage {
	fill: @bullet-color;
}

.dmhPlacedBulletNumber {
	position: relative;
	top: 3px;
	text-align: center;
	color: @bullet-number-color;
}


/****** Draggable Bullet Styles ******/
.dmhDraggableBullet {
	cursor: move;
	position: absolute;
	z-index: 5001;
	height: 30px;
	width: 30px;
	background-color: @bullet-color;
	.border-radius(15px);
	.drop-shadow(0; 0; 10px; 0; .5);
}

.dmhDraggableBulletNumber {
	position: relative;
	top: 3px;
	text-align: center;
	color: @bullet-number-color;
}

#dmhShowDocumentationButton {
	fill: @dark-background-hover-color;
	float: right;
}

#dmhShowDocumentationButton :hover {
	fill: @light-text-color;
	cursor: pointer;
}

#dmhDocumentationIcon {
	margin: 5px 5px 0 0;
	height: 20px;
	width: 20px;
}
